<template>
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <a-form :form="form" slot="detail">
          <a-row>
              <a-col :span="24">
                <a-form-item required label="租户选择" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-search-select-tag :async="true"  placeholder="请选择租户"  v-model="newForm.tenantId" url="/sys/tenant/queryList">
                  </j-search-select-tag>
                </a-form-item>
              </a-col>  
              <a-col :span="24">
                <a-form-item label="文件" required :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-upload
                      name="file"
                      :beforeUpload="beforeUpload"
                      :fileList="fileList"
                      :remove="handleRemove"
                      @change="handleChange"
                    >
                      <a-button> <a-icon type="upload" />请选择上传文件</a-button>
                    </a-upload>
                </a-form-item>
              </a-col>   
              
                
          </a-row>
         
        </a-form>
      </j-form-container>
    </a-spin>
  </template>
  
  <script>
  
    import { httpAction, getAction } from '@/api/manage'
    import pick from 'lodash.pick'
    import JFormContainer from '@/components/jeecg/JFormContainer'
    import JImportModal from '@/components/jeecg/JImportModal'
    import JSwitch from '@/components/jeecg/JSwitch'
    import JDate from '@/components/jeecg/JDate'  
    import JSelectInput from '@comp/jeecgbiz/JSelectInput'
    import JSearchSelectTag from '@/components/dict/JSearchSelectTag2'
    export default {
      name: 'setPriceForm',
      components: {
        JFormContainer,
        JDate,
        JSwitch,
        JSelectInput,
        JSearchSelectTag,
        JImportModal
      },
      props: {
        //流程表单data
        formData: {
          type: Object,
          default: ()=>{},
          required: false
        },
        //表单模式：true流程表单 false普通表单
        formBpm: {
          type: Boolean,
          default: false,
          required: false
        },
        //表单禁用
        disabled: {
          type: Boolean,
          default: false,
          required: false
        }
      },
      data () {
        return {
          newForm:{},
          keywords:'',
          fileList:[],
          form: this.$form.createForm(this),
          model: {},
          
          labelCol: {
            lg: { span: 8 },
            xxl: { span: 6 },
          },
          wrapperCol: {
            lg: { span: 16 },
            xxl: { span: 16 },
          },
          confirmLoading: false,
          validatorRules: {
           
          },
          url: {
            edit: "/wh/drugWestern/import",
          }
        }
      },
      computed: {
        formDisabled(){
          if(this.formBpm===true){
            if(this.formData.disabled===false){
              console.log('000000');
              this.keywords = '';
              return false
            }
            return true
          }
          return this.disabled
        },
        showFlowSubmitButton(){
          if(this.formBpm===true){
            if(this.formData.disabled===false){
              return true
            }
          }
          return false
        }
      },
      mounted () {
        console.log('456');
       
      },
      methods: {
        handleRemove(file) {
          const index = this.fileList.indexOf(file);
          const newFileList = this.fileList.slice();
          newFileList.splice(index, 1);
          this.fileList = newFileList
        },
        beforeUpload(file, fileList){
       
          if(this.fileList && this.fileList.length){
            
            this.fileList = [...[], file]
          }else{
            this.fileList = [...this.fileList, file]
          }
          
          return false
        },
        handleChange(info){
          console.log(info);
          this.newForm.file =  info.file
        },
        
        add () {
          this.edit({});
        },
        edit (record) {
          this.form.resetFields();
          this.model = Object.assign({}, record);
          this.visible = true;
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model,'url'))

            var a = this.form.getFieldValue('stockQuantity')
            var b = this.form.getFieldValue('retailPrice')
            this.form.setFieldsValue({'tiaojiaqian':((a*1)*(b*1))})
          })
        },
        
        submitForm () {
          const that = this;
          if(!this.newForm.tenantId){
            this.$message.error('请选择租户')
            return
          }
          if(!this.newForm.file){
            this.$message.error('请选择文件')
            return
          }
          // 触发表单验证
          this.form.validateFields((err, values) => {
            if (!err) {
              that.confirmLoading = true;
              let httpurl = this.model.url+'/'+this.newForm.tenantId;
              let method = 'post';
              // let formData = Object.assign({}, this.newForm);
              console.log("表单提交数据",formData)
              const formData = new FormData();
              formData.append('file', this.newForm.file);
              httpAction(httpurl,formData,method).then((res)=>{
                if(res.success){
                  that.$message.success(res.message);
                  that.$emit('ok');
                }else{
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.confirmLoading = false;
              })
            }
           
          })
        },
      
      }
    }
  </script>
  <style lang="less" scoped>
  .yb-form{
    background: #F0F0F0;
    padding: 12px;
  }
  </style>